$(function(){
    laydate.render({
        elem: '#chekDate',
        range: true
    });
    $('.content-date>a').click(function(){
        $(this).addClass('active').siblings('a').removeClass('active')
    })

    function myChart(){
        var myChart = echarts.init(document.getElementById('index-chart'));
        let dataC1 =[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 260, 280];
        let dataC2 =[220, 182, 191, 210, 230, 270, 270, 201, 154, 140, 240, 250]
         let dataC3 =[150, 232, 201, 154, 190, 180, 210, 150, 182, 201, 154, 190]
          let dataD1 =[150, 232, 201, 154, 190, 180, 210, 150, 182, 201, 154, 190]
           let dataD2 =[150, 232, 201, 154, 190, 180, 210, 150, 182, 201, 154, 190]
            let dataD3 =[200, 232, 201, 200, 190, 190, 210, 190, 182, 201, 154, 190]
            let xData = ['2020-7-1', '2020-7-2', '2020-7-3', '2020-7-4', '2020-7-5', '2020-7-6', '2020-7-7'];
            
      for(var i = 0;i<xData.length;i++){
          dataC1.splice(i,1,{name:xData[i],value:dataC1[i]});
          dataC2.splice(i,1,{name:xData[i],value:dataC2[i]});
          dataC3.splice(i,1,{name:xData[i],value:dataC3[i]});
          dataD1.splice(i,1,{name:xData[i],value:dataD1[i]});
          dataD2.splice(i,1,{name:xData[i],value:dataD2[i]});
          dataD3.splice(i,1,{name:xData[i],value:dataD3[i]});
      }
      console.log(dataC1);
      console.log(dataC2);
      console.log(dataC3);
      console.log(dataD1);
      console.log(dataD2);
      console.log(dataD3);
      
      var fontColor = '#30eee9';
      option = {
          grid: {
              left: '5%',
              right: '2%',
              top: '10%',
              bottom: '15%',
              containLabel: true
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow',
                  lineStyle: {
                      color: '#57617B'
                  }
              }
          },
          legend: {
              data: ['C1', 'C2', 'C3', 'D1', 'D2', 'D3'],
              itemWidth: 20,
              itemHeight: 10,
              textStyle: {
                  fontSize: 14,
                  color: '#65aaf1',
              },
              right: '35%', //距离右侧
              top: "5%"
              // left : '50%'
          },
          xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  color: '#65aaf1'
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#0a2b52',
                      width: 1
                  }
              },
              /*axisTick:{
                          show:false,
                      },  
                      splitLine:{
                          show:true,
                          lineStyle:{
                              color:'#195384'
                          }
                      },*/
              data:xData
          }],
          yAxis: [{
              type: 'value',
              // name: 'kw/h',
              nameTextStyle: {
                  color: '#65aaf1',
                  fontStyle: 'normal'
              },
              axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                      color: '#65aaf1'
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: '#0a2b52'
                  }
              },
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: '#0a2b52',
                      width: 1,
                      type: 'solid'
                  }
              }
          }],
          series: [{
                  name: 'C1',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  showSymbol: false,
                  symbolSize: 8,
                  itemStyle: {
                      normal: {
                          color: '#0092f6',
                          lineStyle: {
                              color: "#0092f6",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,44,90,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(0,146,246,0.9)'
                              }]),
                          }
                      }
                  },
                  markPoint: {
                      itemStyle: {
                          normal: {
                              color: 'red'
                          }
                      }
                  },
                  data:dataC1
              },
              {
                  name: 'C2',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  showSymbol: false,
                  symbolSize: 8,
      
                  itemStyle: {
                      normal: {
                          color: '#00d4c7',
                          lineStyle: {
                              color: "#00d4c7",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,44,90,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(0,212,199,0.9)'
                              }]),
                          }
                      }
                  },
                  data: dataC2
              },
              {
                  name: 'C3',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  showSymbol: false,
                  symbolSize: 8,
                  itemStyle: {
                      normal: {
                          color: '#aecb56',
                          lineStyle: {
                              color: "#aecb56",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,44,90,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(114,144,89,0.9)'
                              }]),
                          }
                      }
                  },
                  data: dataC3
              },
              {
                  name: 'D1',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  showSymbol: false,
                  symbolSize: 8,
                  itemStyle: {
                      normal: {
                          color: '#3A44FB',
                          lineStyle: {
                              color: "#3A44FB",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,46,101,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(0,166,246,0.9)'
                              }]),
                          }
                      }
                  },
                  data: dataD1
              },
              {
                  name: 'D2',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  symbolSize: 8,
                  showSymbol: false,
                  itemStyle: {
                      normal: {
                          color: '#6FE81A',
                          lineStyle: {
                              color: "#6FE81A",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,44,90,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(0,212,199,0.9)'
                              }]),
                          }
                      }
                  },
                  data: dataD2
              },
              {
                  name: 'D3',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  showSymbol: false,
                  symbolSize: 8,
                  itemStyle: {
                      normal: {
                          color: '#aecb56',
                          lineStyle: {
                              color: "#aecb56",
                              width: 1
                          },
                          areaStyle: {
                              //color: '#94C9EC'
                              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0.4,
                                  color: 'rgba(7,44,90,0.1)'
                              }, {
                                  offset: 1,
                                  color: 'rgba(0,212,199,0.9)'
                              }]),
                          }
                      }
                  },
                  data: dataD3
              }
          ]
      };
        myChart.setOption(option);
    }
    myChart()
})